<template>
    <div class="tips" :class="{show: TipsShow}">
        <h2>关于：</h2>
    <p>这个应用可以用来追踪你选择城市的当前天气</p>
    <h2>使用说明：</h2>
    <p>
      1.点击搜索框输入你希望追踪的城市
      <br />
      2.在搜索结果中选中一个城市，你将获取当地最新的天气
      <br />
      3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
      <br />
      4.点击上方新中地天气即可回到首页
    </p>
    <h2>移除城市：</h2>
    <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
    <button @click="handleClose">关闭</button>
    </div>
</template>

<script setup>
const props = defineProps({
    TipsShow:{
        type:Boolean,
        required:true,
    }
});
const emits = defineEmits(['handleClose'])

const handleClose = () => {
    emits('handleClose')
}
</script>

<style lang="scss" scoped>
    .tips {
        position: fixed;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        color: #333;
        font-weight: 500;
        width: 350px;
        padding: 15px;
        background-color: #fff;
        border-radius: 5px;
        opacity: 0;
        transition-duration: 0.5s;
        &.show {
            opacity: 1;
            transition-duration: 1s;
            z-index: 999;
        }
        p{
            font-size: 0.8rem;
            line-height: 1rem;
            margin-bottom: 1rem;
        }
        button {
            width: 72px;
            height: 35px;
            background-color: #00668a;
            color: #fff;
            border: none;
            border-radius: 3px;
            font-size: 1rem;
            cursor: pointer;
        }
    }
</style>